<template>
  <el-form :inline="true" :disabled="disabled">
    <!--第一项-->
    <el-form-item label="一级分类">
      <!--当下拉列表中的值产生切换后;会触发change事件-->
      <el-select v-model="category1Id" placeholder="请选择" @change="category1Change">
        <el-option :label="item.name" :value="item.id"
                   v-for="item in category1List" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <!--第二项-->
    <el-form-item label="二级分类">
      <el-select v-model="category2Id" placeholder="请选择" @change="category2Change">
        <el-option :label="item.name" :value="item.id"
                   v-for="item in category2List" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <!--第三项-->
    <el-form-item label="三级分类">
      <el-select v-model="category3Id" placeholder="请选择" @change="category3Change">
        <el-option :label="item.name" :value="item.id"
                   v-for="item in category3List" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'CategorySelector',
  //props:["disabled"], //disabled控制三级列表是否禁用 true:禁用  false:不禁用
  data() {
    return {
      category1Id:"", //选中的一级分类的id
      category1List:[],//存放一级分类对应的所有选项
      category2Id:"", //选中的二级分类的id
      category2List:[],
      category3Id:"" , //选中的三级分类的id
      category3List:[],
      disabled:false
    }
  },
  methods:{
    //当一级分类对应的下拉列表的值产生变化时触发的函数
    async category1Change(item){
      //当一级分类产生改变 二三级分类应该清空
      this.category2Id = "";
      this.category2List = [];
      this.category3Id = "";
      this.category3List = [];

      //item : 目前的选中值  代表的就是一级分类的id
      const {data} = await this.$API.category.getCategorys2(item)
      this.category2List = data;

      //通知父组件 当前一级分类的id产生变化了
      //level : 到底是几级分类产生了变化
      //id : 变化完的id
      this.$emit("idChange",{id:this.category1Id,level:1})
    },
    //当二级分类对应的下拉列表的值产生变化时触发的函数
    async category2Change(item){
      //当二级分类产生改变 三级分类应该清空
      this.category3Id = "";
      this.category3List = [];

      //item : 目前的选中值  代表的就是二级分类的id
      const {data} = await this.$API.category.getCategorys3(item)
      this.category3List = data;

      //通知父组件 当前二级分类的id产生变化了
      this.$emit("idChange",{id:this.category2Id,level:2})
    },
    async category3Change(item){
      //通知父组件 当前三级分类的id产生变化了
      this.$emit("idChange",{id:this.category3Id,level:3})
    }
  },
  async mounted(){
    //获取一级分类相关的数据
    const {data} = await this.$API.category.getCategorys1()
    this.category1List = data;
  }
}
</script>
